<template>
  <div class="file-web1-container" :class="{ dark: isDarkMode }">
    <!-- 头部导航 -->


    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 关卡信息 -->
      <div class="level-info" :class="{ dark: isDarkMode }">
        <div class="flex items-center mb-4">
          <div class="level-icon-container" :class="{ dark: isDarkMode }">
            <i class="fas fa-upload"></i>
          </div>
          <h2 class="level-title">关卡 1: 不安全的文件上传验证</h2>
        </div>
        <p class="level-description" :class="{ dark: isDarkMode }">
          这个网站允许用户上传头像图片，但存在文件上传漏洞。尝试上传恶意文件获取服务器控制权，最终目标是找到FLAG。
        </p>
        <div class="tag-container">
          <span class="tag-item tag-file-upload" :class="{ dark: isDarkMode }">文件上传</span>
          <span class="tag-item tag-front-bypass" :class="{ dark: isDarkMode }">前端验证绕过</span>
          <span class="tag-item tag-mime-bypass" :class="{ dark: isDarkMode }">MIME类型验证绕过</span>
        </div>
      </div>

      <!-- 模拟网站界面 -->
      <div class="website-container" :class="{ dark: isDarkMode }">
        <!-- 网站标题栏 -->
        <div class="website-header">
          <div class="window-controls">
            <div class="control-buttons">
              <div class="control-button red"></div>
              <div class="control-button yellow"></div>
              <div class="control-button green"></div>
            </div>
            <div class="website-url">
              http://localhost:8080/new_env/flaw_file/452sa35120.php
            </div>
          </div>
        </div>

        <!-- 网站内容 -->
        <div class="website-content">
          <h3 class="content-title">个人资料 - 头像上传</h3>

          <!-- 上传表单 -->
          <form @submit.prevent="handleUpload" class="mb-6">
            <div class="form-group">
              <label class="form-label" :class="{ dark: isDarkMode }">选择头像图片</label>
              <div class="file-input-container">
                <input
                    type="file"
                    id="fileUpload"
                    @change="onFileSelected"
                    accept="image/*"
                    class="file-input"
                    :class="{ dark: isDarkMode }"
                >
                <button
                    type="submit"
                    class="submit-button"
                >
                  <i class="fas fa-upload mr-1"></i> 上传
                </button>
              </div>
              <p class="file-hint" :class="{ dark: isDarkMode }">支持的格式: JPG, PNG, GIF (最大 2MB)</p>
            </div>
          </form>

          <!-- 上传结果反馈 -->
          <div v-if="feedback" class="feedback-container" :class="[feedback.type === 'success' ? 'success' : 'error', { dark: isDarkMode }]">
            <div class="feedback-content">
              <i class="fas" :class="feedback.type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'" ></i>
              <div class="feedback-text">
                <h4 class="feedback-title">{{ feedback.title }}</h4>
                <p class="feedback-message">{{ feedback.message }}</p>
                <p v-if="feedback.path" class="feedback-path">文件路径: <code>{{ feedback.path }}</code></p>
                <p v-if="feedback.flag" class="feedback-flag" :class="{ dark: isDarkMode }">🎉 {{ feedback.flag }}</p>
              </div>
            </div>
          </div>

          <!-- 当前头像显示 -->
          <div v-if="currentAvatar" class="avatar-section">
            <h4 class="avatar-title">当前头像</h4>
            <div class="avatar-container" :class="{ dark: isDarkMode }">
              <img :src="currentAvatar" alt="当前头像" class="current-img">
            </div>
          </div>
        </div>
      </div>

      <!-- 攻击路径和提示 -->
      <div class="grid-container">
        <!-- 提示区域 -->
        <div class="attack-hints" :class="{ dark: isDarkMode }">
          <h3 class="hints-title">
            <i class="fas fa-lightbulb hints-icon mr-2"></i> 练习提示
          </h3>
          <ul class="hints-list" :class="{ dark: isDarkMode }">
            <li class="hint-item">
              <i class="fas fa-angle-right hint-icon mt-1 mr-2"></i>
              <span>尝试上传不同类型的文件，观察服务器的反应</span>
            </li>
            <li class="hint-item">
              <i class="fas fa-angle-right hint-icon mt-1 mr-2"></i>
              <span>注意前端验证和后端验证的区别</span>
            </li>
            <li class="hint-item">
              <i class="fas fa-angle-right hint-icon mt-1 mr-2"></i>
              <span>文件扩展名和MIME类型都可能成为突破口</span>
            </li>
            <li class="hint-item">
              <i class="fas fa-angle-right hint-icon mt-1 mr-2"></i>
              <span>如果成功上传PHP文件，尝试通过URL访问它</span>
            </li>
          </ul>
        </div>
      </div>
    </main>



    <!-- 帮助模态框 -->
    <div v-if="isHelpOpen" class="modal-overlay">
      <div class="modal-content" :class="{ dark: isDarkMode }">
        <div class="modal-header">
          <h3 class="modal-title">关于本练习</h3>
          <button @click="isHelpOpen = false" class="modal-close" :class="{ dark: isDarkMode }">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body" :class="{ dark: isDarkMode }">
          <p>本练习模拟了一个存在文件上传漏洞的网站。您的目标是上传一个恶意文件并执行，最终获取FLAG。</p>
          <p>在真实环境中，文件上传漏洞可能导致服务器被入侵，攻击者可以上传后门程序获取服务器控制权。</p>
          <p>完成本练习后，您将了解文件上传漏洞的原理和常见的利用方法。</p>
        </div>
        <button
            @click="isHelpOpen = false"
            class="modal-button"
        >
          明白了
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      feedback: null,
      currentAvatar: null,
      showAttackPath: false,
      isHelpOpen: false,
      isDarkMode: false
    };
  },
  methods: {
    onFileSelected(event) {
      this.selectedFile = event.target.files[0];
    },
    handleUpload() {
      if (!this.selectedFile) {
        this.feedback = {
          type: 'error',
          title: '上传失败',
          message: '请选择要上传的文件'
        };
        return;
      }

      // 模拟文件上传验证逻辑
      const fileName = this.selectedFile.name.toLowerCase();
      const fileExtension = fileName.split('.').pop();
      const fileSize = this.selectedFile.size;

      // 重置反馈
      this.feedback = null;

      // 前端验证模拟（实际环境中可能被绕过）
      const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];

      // 模拟不同的验证绕过情况
      if (allowedExtensions.includes(fileExtension)) {
        // 允许的文件类型
        this.feedback = {
          type: 'success',
          title: '上传成功',
          message: '您的头像已成功更新',
          path: `/uploads/avatars/${fileName}`
        };
        // 显示上传的图片
        this.currentAvatar = URL.createObjectURL(this.selectedFile);
      } else if (fileExtension === 'php' || fileExtension === 'php5' || fileExtension === 'phtml') {
        // PHP文件处理 - 模拟后端验证不严格的情况
        // 50%概率绕过（模拟不同的验证强度）
        if (Math.random() > 0.5) {
          // 绕过成功
          this.feedback = {
            type: 'success',
            title: '上传成功',
            message: '文件已成功上传到服务器',
            path: `/uploads/avatars/${fileName}`,
            flag: 'FLAG{Un54f3_F1l3_Upl04d_3xpl01t3d}'
          };
          this.currentAvatar = 'https://picsum.photos/200/200?random=1';
        } else {
          // 被拦截
          this.feedback = {
            type: 'error',
            title: '上传失败',
            message: '不允许上传PHP文件，请上传图片文件'
          };
        }
      } else if (fileExtension === 'asp' || fileExtension === 'aspx' || fileExtension === 'jsp') {
        // 其他脚本文件
        this.feedback = {
          type: 'error',
          title: '上传失败',
          message: '不允许上传脚本文件，请上传图片文件'
        };
      } else if (fileSize > 2 * 1024 * 1024) {
        // 文件过大
        this.feedback = {
          type: 'error',
          title: '上传失败',
          message: '文件大小超过限制（最大2MB）'
        };
      } else {
        // 其他不允许的文件类型
        this.feedback = {
          type: 'error',
          title: '上传失败',
          message: '不支持的文件类型，请上传图片文件（JPG, PNG, GIF）'
        };
      }

      // 清空文件选择
      document.getElementById('fileUpload').value = '';
      this.selectedFile = null;
    },
    showHelp() {
      this.isHelpOpen = true;
    },
    toggleDarkMode() {
      this.isDarkMode = !this.isDarkMode;
      document.documentElement.classList.toggle('dark');
    }
  },
  mounted() {
    // 初始化默认头像
    this.currentAvatar = 'https://picsum.photos/200/200?random=0';
  }
};
</script>

<style scoped lang="css" src="@/assets/styles/fileweb1.css"></style>
